<template>
  <a-drawer
    :title="title"
    :visible="visible"
    :destroyOnClose="true"
    :width="400"
    :body-style="{ paddingBottom: '80px' }"
    @close="onClose"
  >
    <a-form layout="vertical">
      <a-form-item label="商品或服务名称" v-bind="validateInfos.name">
        <a-input
          placeholder="请输入商品或服务名称"
          v-model:value="modelRef.name"
        />
      </a-form-item>
      <a-form-item label="税收分类编码" v-bind="validateInfos.tax_code">
        <a-input
          placeholder="请输入税收分类编码"
          v-model:value="modelRef.tax_code"
        />
      </a-form-item>
      <a-form-item label="税率" v-bind="validateInfos.tax_rate">
        <a-input
          addon-after="%"
          v-model:value="modelRef.tax_rate"
          placeholder="请输入税率"
          type="number"
        />
      </a-form-item>
    </a-form>
    <div class="drawer-footer">
      <a-space>
        <a-button @click.prevent="onClose">取消</a-button>
        <a-button type="primary" @click.prevent="onSubmit">保存</a-button>
      </a-space>
    </div>
  </a-drawer>
</template>

<script>
import { computed, defineComponent, reactive, toRaw, watch } from "vue";
import { Form, message } from "ant-design-vue";
import request from "../../../../common/utils/request";
const useForm = Form.useForm;

export default defineComponent({
  name: "AddTaxCode",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: 0,
    },
  },
  setup(props, { emit }) {
    /**
     * @description: 标题显示
     */
    const title = computed(() => {
      return props.id ? "编辑税收分类编码" : "新增税收分类编码";
    });

    /**
     * @description: 触发关闭
     */
    const onClose = () => {
      emit("cancel");
    };

    /**
     * @description: 表单字段
     */
    const modelRef = reactive({
      name: "",
      tax_code: "",
      tax_rate: "",
    });

    /**
     * @description: 验证规则
     */
    const required = [{ required: true, message: "必填项" }];
    const rulesRef = reactive({
      name: required,
      tax_code: required,
      tax_rate: required,
    });

    /**
     * @description: 创建表单
     */
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    /**
     * @description: 提交表单
     */
    const onSubmit = () => {
      validate().then(() => {
        const params = { ...toRaw(modelRef), needMsg: true };
        const success = (res) => {
          message.success(res.msg);
          emit("success");
        };
        if (props.id) {
          params.id = props.id;
          request
            .put("/org", "/invoice/codeEdit", params)
            .then((res) => success(res));
        } else {
          request
            .post("/org", "/invoice/codeAdd", params)
            .then((res) => success(res));
        }
      });
    };

    /**
     * @description: 获取编辑信息
     */
    const getEditInfo = () => {
      request.get("/org", "/invoice/taxCode", { id: props.id }).then((res) => {
        const { detail } = res;
        setModelRef({
          name: detail.name,
          tax_code: detail.tax_code,
          tax_rate: detail.tax_rate,
        });
      });
    };

    const setModelRef = (state) => {
      for (let key in state) {
        modelRef[key] = state[key];
      }
    };

    /**
     * @description: 初始化
     */
    const init = () => {
      if (props.id) {
        getEditInfo();
      }
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          // 打开时初始化数据
          init();
        } else {
          // 关闭时重置数据
          resetFields();
        }
      }
    );
    return {
      title,
      modelRef,
      validateInfos,
      resetFields,
      onSubmit,
      onClose,
    };
  },
});
</script>

<style lang="less" scoped></style>
